<template>
  <a-layout>
    <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
      <a-form layout="inline" :model="param" style="margin-bottom: 15px;">
        <a-form-item>
          <a-input v-model:value="param.name" placeholder="名称"/>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="search">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="add">新增</a-button>
        </a-form-item>
      </a-form>
      <a-table
          :columns="columns"
          :row-key="record=>record.id"
          :data-source="categories"
          :loading="loading"
          :scroll="{ y: 400 }"
          :pagination="false"
      >
        <template #bodyCell="{column,text,record}">
          <template v-if="column.dataIndex === 'action'">
            <a-space size="small">
              <a-button type="primary" @click="edit(record.id)" shape="round">编辑</a-button>
              <a-button type="primary" danger shape="round" @click="del(record.id)">删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
  <a-modal v-model:visible="visible"
           title="分类管理"
           :confirm-loading="confirmLoading"
           @ok="handleOk">
    <a-form :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item v-if="type === 'add'" label="ID" name="id">
        <a-input v-model:value="formData.id"/>
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="formData.name"/>
      </a-form-item>
      <a-form-item label="父分类">
        <a-select
            ref="select"
            v-model:value="formData.parent"
        >
          <a-select-option value="0">
            无
          </a-select-option>
          <a-select-option :value="item.id" v-for="item in categories" :key="item.id"
                           :disabled="formData.id=== item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="顺序">
        <a-input v-model:value="formData.sort"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import request from '@/util/request';
import {message, Modal} from "ant-design-vue";
import Tool from "@/util/toTree";
/*查询的名字*/
const param = reactive({
  name: undefined
});
/*查询操作*/
const search = () => {
  type.value = 'search'
  handleQuery()
}
/*编辑还是新增*/
const type = ref();
/*删除*/
const del = (id: number) => {
  console.log("要删除的id", id)
  Modal.confirm({
    title: '确定要删除吗?',
    content: '菜单',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      request.delete(`/category/${id}`).then(() => {
        message.success("删除成功！")
        handleQuery();
      })
    },
    onCancel() {
      message.info("取消删除")
    },
  });
}
/*新增*/
const add = () => {
  visible.value = true
  formData.value = {parent: "", id: "", name: "", sort: ""}
  type.value = 'add'
}
/*编辑*/
const edit = (id: number) => {
  visible.value = true
  request.get(`/category/${id}`).then(res => {
    formData.value = res.data
  })
  type.value = 'edit'
}
/*表单*/
const visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const formData = ref({
  id: '',
  name: '',
  sort: '',
  parent: ''
});
const labelCol = {style: {width: '150px'}};
const wrapperCol = {span: 14};
const handleOk = () => {
  console.log(type.value)
  confirmLoading.value = true;
  if (type.value === 'edit') {
    request.put('/category', formData.value).then(() => {
      confirmLoading.value = false;
      visible.value = false;
      message.success('更新成功')
      handleQuery();
    }).catch(err => {
      confirmLoading.value = false
      console.log(err)
    })
  } else {
    request.post('/category', formData.value).then(() => {
      confirmLoading.value = false;
      visible.value = false;
      message.success('新增成功')
      handleQuery();
    }).catch(err => {
      confirmLoading.value = false
      console.log(err)
    })
  }
};

/*分类*/
let categories = ref<any>([])
let loading = ref(false)

/*表格列*/
const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '父分类',
    dataIndex: 'parent'
  },
  {
    title: '顺序',
    dataIndex: 'sort'
  },
  {
    title: 'Action',
    key: 'action',
    dataIndex: 'action',
  }
]
/*数据查询*/
const handleQuery = () => {
  categories.value = []
  loading.value = true
  request.get('/category/list', {
    params: {
      name: param?.name
    }
  }).then(res => {
    loading.value = false;
    if (type.value === 'search') {
      categories.value = res.data
    }
    categories.value = Tool.array2Tree(res.data, 0);
  }).catch(err => {
    loading.value = false;
    console.log(err)
  })
}

onMounted(() => {
  handleQuery();
})
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>